<template>
  <div class style="height:100%">
    <el-table
      :data="data.filter(dataFilter)"
      style="width: 100%"
      height="100%"
      row-key="id"
      stripe
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="functionName" label="菜单名称" width="180"></el-table-column>
      <el-table-column prop="functionUrl" label="菜单Url" width="180"></el-table-column>
      <el-table-column prop="functionOrderNum" label="菜单序号" width="180"></el-table-column>
      <el-table-column prop="functionIntroduce" label="备注"></el-table-column>
      <el-table-column prop="menuStyle" label="菜单样式">
         <template  slot-scope="scope">
           <!-- <span>{{scope.row}}</span> -->
          <i :class="scope.row.menuStyle"></i>/<span>{{scope.row.menuStyle}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="220px" align="center">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入一级菜单名称搜索" />
        </template>
        <template slot-scope="scope" width="200">
          <el-button type="primary" class="el-icon-edit" @click="editItem(scope.row)" size="mini">编辑</el-button>
          <el-button type="primary" class="el-icon-plus" @click="addItem(scope.row)" size="mini">增加</el-button>
          <el-button
            type="danger"
            class="el-icon-delete"
            @click="deleteItem(scope.row)"
            size="mini"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- </el-card> -->
    <el-dialog title="操作管理" width="300px" :visible.sync="dialogFormVisible">
      <el-form :model="form" size="mini" :rules="rules" ref="form" label-width="100px">
        <my-form-item label="菜单名称" prop="functionName">
          <el-input v-model="form.functionName" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="菜单url" prop="functionUrl">
          <el-input v-model="form.functionUrl" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="菜单序号">
          <el-input v-model="form.functionOrderNum" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="备注">
          <el-input v-model="form.functionIntroduce" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="菜单样式">
          <!-- <el-select v-model="form.menuStyle" placeholder="请选择" :disabled="isAdd||form.functionUrl!='#' "> -->
          <el-select v-model="form.menuStyle" placeholder="请选择">
            <el-option label="请选择" value="">
            </el-option>
            <el-option v-for="item in options" :key="item" :value="item">
              <i :class="item"></i>/{{item}}
            </el-option>
          </el-select>
          <!-- <el-input v-model="" autocomplete="off"></el-input> -->
        </my-form-item>
        <my-form-item label="节点位置" v-show="isAdd">
          <el-radio-group v-model="form.nodeType">
            <el-radio label="1">兄弟节点</el-radio>
            <el-radio label="2">子节点</el-radio>
          </el-radio-group>
        </my-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle()" size="mini">取 消</el-button>
        <el-button type="primary" @click="ok" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import options from "./icons.js"
import { getMenuList } from "@/functions/menuList";
import { addItem, deleteItem, editItem } from "./function";
export default {
  components: {},
  data() {
    return {
      isAdd: false,
      search: "",
      dialogFormVisible: false,
      options: options.icons ,
      form: {
        parentId: "",
        functionName: "",
        functionUrl: "",
        functionIntroduce: "",
        functionOrderNum: "",
        menuStyle: "",
        menuFlag: "1", //固定参数
        title: "",
        nodeKey: ""
      },
     
      rules: {
        functionName: [
          { required: true, message: "菜单名称不能为空！", trigger: "blur" }
        ],
        functionUrl: [
          {
            required: true,
            message: "菜单url不能为空！",
            trigger: "blur"
          }
        ]
      },
      data: [],
      props: {
        label: "functionName",
        children: "children"
      },
      chackedNode: {}
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
     
    dataFilter(item) {
      return (
        !this.search ||
        item.functionName.toLowerCase().includes(this.search.toLowerCase())
      );
    },
    cancle() {
      this.dialogFormVisible = false;
      this.resetForm("form");
    },
    init() {
      getMenuList().then(res => {
        console.log(res);
        if (res.retHead.code == "0000000") {
          this.data = res.retBody;
        }
      });
      this.chackedNode = {};
    },
    handleNodeClick(v) {
      console.log(v);
      this.chackedNode = v;
    },
    rule1() {
      if (this.chackedNode.functionName == undefined) {
        this.$message.error("请先选取一个节点！");
        return false;
      } else {
        return true;
      }
    },
    ok() {
      if (this.isAdd) {
        this.handleAdd();
      } else {
        this.handleEdit();
      }
    },
    handleAdd() {
      if (this.form.nodeType == 1) {
        this.form.parentId = this.chackedNode.parentId;
      } else {
        this.form.parentId = this.chackedNode.id;
      }
      this.form.menuFlag = "1";
      this.$refs.form.validate(valid => {
        if (valid) {
          addItem(this.form).then(res => {
            // this.dialogFormVisible = false;
            if (res.retHead.code == "0000000") {
              this.dialogFormVisible = false;
              this.$message.success("操作成功！");
              this.init();
            } else {
              this.dialogFormVisible = true;
              this.$message.error("添加失败：" + res.retHead.message);
            }
          });
        }
      });
    },
    handleEdit() {
      console.log(this.form)
      this.$refs.form.validate(valid => {
        if (valid) {
          editItem(this.form).then(res => {
            this.dialogFormVisible = false;
            if (res.retHead.code == "0000000") {
              this.$message.success("操作成功！");
            } else {
              this.$message.error("操作失败！");
            }
          });
        }
      });
    },
    deleteItem(row) {
      let params = {
        id: row.id
      };
      deleteItem(params).then(res => {
        if (res.retHead.code == "0000000") {
          this.$message.success("操作成功！");
          this.init();
        } else {
          this.$message.error("操作失败！");
        }
      });
    },
    addItem(row) {
      this.isAdd = true;
      this.dialogFormVisible = true;
      this.chackedNode = JSON.parse(JSON.stringify(row));
      this.form = {};
    },
    editItem(row) {
      console.log(row);
      this.isAdd = false;
      this.dialogFormVisible = true;
      this.chackedNode =  JSON.parse(JSON.stringify(row));
      this.form = JSON.parse(JSON.stringify(row));
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created() {}
};
</script>
<style lang='scss' scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>